<template>
  <CustomNav title="拾光锦汉服体验店"></CustomNav>
  <view class="container">
    <view class="content">
      <view class="longPress">长按添加微信</view>
      <view class="title">陕西工院汉服体验</view>
      <view class="qrcode" @click="handleScanCode">
        <u-image
          :show-loading="true"
          :src="WxQrcode"
          width="400rpx"
          height="400rpx"
        ></u-image>
      </view>
      <view class="wx">微信：{{ wx }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import CustomNav from "@/components/CustomNav/index.vue";
import { previewImage } from "@/utils/tool";
import { shopInfo } from "@/api/index";

// 微信二维码
const WxQrcode = ref("");
const wx = ref("");

// 扫码
const handleScanCode = () => {
  previewImage(WxQrcode.value);
};

onMounted(async () => {
  const result = await shopInfo();

  WxQrcode.value = result.data.data.qrcode;
  wx.value = result.data.data.wx;
});
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f7f7;

  .content {
    width: 550rpx;
    padding: 40rpx 55rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // box-shadow: 0 0 20rpx 3rpx #ccc;
    background-color: #fff;
    border-radius: 20rpx;

    .longPress {
      font-size: 34rpx;
      font-weight: 800;
    }

    .title {
      font-size: 30rpx;
      color: #1a1a1a;
      margin-top: 10rpx;
    }

    .qrcode {
      margin: 20rpx 0 30rpx;
    }

    .wx {
      color: #898989;
      font-size: 28rpx;
    }
  }
}
</style>
